<template>
  <!--20210806开发横竖屏版本-->
  <div :class="isShowOldCard ? 'invitation-box-old':'invitation-box'" id="canvas-box">
	 <div v-if="isShowOldCard"> <!-- 回看未获取到id -->
    <img v-if="isLoading" class="loading" src="../../assets/images/invite/loading.gif" alt=""/>
	   <div class="close-btn-old" @click="closeBtn"></div>
	   <CanvasImgCom  @msgParent = 'callBackChild' :newInviteType ='newInviteType'   :postImg = 'postImg'  :txBase = 'txBase'  :correct='correct' :fromCom='fromCom' :liveInfo='liveInfo'/>
	   <FooterSlideCom :footerTitle='footerTitle' :correct='correct' :fromCom='fromCom' @clickTemplate='clickTemplate' :isShow="isShow"/>
   </div>
   <!-- 新版样式 -->
   <div v-else> 
      <CanvasImgComTwo  @msgParent = 'callBackChild' :fromComPage="fromComPage" :newInviteType = 'newInviteType' :postImg = 'postImg'  :txBase = 'txBase' :liveInfo='liveInfo'  :currentBanner='currentBanner' :fromCom='fromCom' ></CanvasImgComTwo>
    </div>
  </div>
</template>

<script>
	import FooterSlideCom from './footerSlideCom.vue'; //底部面板组件
	import CanvasImgCom from './canvasImgCom.vue'; //
  import CanvasImgComTwo from './canvasImgCom2.vue'; //全屏邀请卡组件 新版
	export default {
		components: {
			FooterSlideCom,
			CanvasImgCom,
      CanvasImgComTwo,
		},
		props:{
		  fromCom:String,//横屏直播 竖屏直播 横屏回看 竖屏回看
		  liveInfo:Object,//直播间信息（主题，预告时间）
		  fromComPage:String,// live 直播间  back 回看
		},
	data() {
		return {
			plat: fun.getPlatform(),//app wx
			ERcode: this.$lockr.get("ERcode"),
			liveTheme: '', //主题
			txBase: '',//用户头像
			postImg: '', //封面图
			banner: [
				{ url: require('../../assets/images/invite/1.png'), smallUrl: require('../../assets/images/invite/small1.png'), title: "标准版" },
			    { url: require('../../assets/images/invite/2.png'), smallUrl: require('../../assets/images/invite/small2.png'), title: "蓝色简约" },
			    { url: require('../../assets/images/invite/3.png'), smallUrl: require('../../assets/images/invite/small3.png'), title: "限时抢购" },
			    { url: require('../../assets/images/invite/4.png'), smallUrl: require('../../assets/images/invite/small4.png'), title: "看直播赢好礼" },
				{ url: require('../../assets/images/invite/5.png'), smallUrl: require('../../assets/images/invite/small5.png'), title: "建投版邀请卡" },
			],
			currentBanner: [],//新版邀请卡数据
			correct: 0,
			footerTitle: '',
			isShow: true,
			isShowOldCard: false, //roomId为null展示老版本邀请卡
			roomId: null,
			isLoading: true,
			newInviteType:2222
		}
	},
		computed: {
		},
		created(){
			this.roomId = this.liveInfo.roomId;
			// 直播主题img
			this.getImgBase64(this.liveInfo.imagUrl,'back');
			//用户头像
			let wxPic = this.$store.state.userInfo.wxpic;
	        if(wxPic == null|| wxPic.includes('gd_mr')){//游客容错
				this.txBase  = require('../../assets/images/gd_mr.png')
			}else{
				this.getImgBase64(wxPic,'tx');
			};
			if(this.roomId == null){//展示老版本邀请卡
				this.isShowOldCard = true
				this.isWXApp();
			}else{
				this.getInviteBgList();//获取背景
			}
			
		},
		mounted(){
		},
		methods:{
			//全屏邀请卡背景
			getInviteBgList() {
				this.$http.get('/h5live/getShardingImg?roomId=' + this.roomId).then((res) => {
					let {code,data} = res.data
					if(code=='000000'){	
						for(var i=0; i<data.length; i++){//处理邀请卡数据 建投版邀请卡
						let {title,imgUrl} = data[i]
						if(title=='标准版'){
							this.currentBanner.push(this.banner[0])
						}else if(title=='蓝色简约'){
							this.currentBanner.push(this.banner[1])
						}else if(title == '限时抢购'){
							this.currentBanner.push(this.banner[2])
						}else if(title == '看直播赢好礼'){
							this.currentBanner.push(this.banner[3])
						}else if(title == '建投版邀请卡'){
							this.newInviteType = 'newInviteSmall'
							this.currentBanner.push(this.banner[4])
						}else{//自定义
							let obj ={url:imgUrl,smallUrl:imgUrl,title:title}
							this.currentBanner.push(obj)
						}
						}
					}
				}, (err) => {
					console.log(err);
				})
			},
			// 关闭弹窗页面
			closeBtn(){
            this.$emit("formChildMsg", {
              type: "closeInvitation",
              data: 'ruan'
              });
			},
			// 本地将url转成base64格式
            getImgBase64(url,source) {
                let _this = this;
                window.fun.getBase64(url,source,function(res){
                    if(source === "back"){
                        _this.postImg= res; // 将结果赋值给需要用的变量属性
                    }else{
                        _this.txBase = res;
                    }
                })
            },
			// 获取correct
			clickTemplate(c){
				this.correct = c
			},
			callBackChild(data){
				if(data.type=='closeLoading'){
					this.isLoading = false
				}
				if(data.type=='closeSlide'){
          this.isShow= ! this.isShow
				}
        //新版全屏邀请卡页面事件
        if(data.type == 'closeInvitePage'){
          this.closeBtn()
        }
			},
			isWXApp() {
				var ua = navigator.userAgent.toLowerCase();
				if((/MicroMessenger/i).test(ua)) {
					this.footerTitle = "长按上方图片保存邀请卡 邀请好友来看直播吧~"
				} else { 
					this.footerTitle = "手机截屏上方完整图片，邀请好友来看直播吧"
				}
			},
		},
		watch:{
			}

	}
</script>

<style scoped="scoped">
.list-header-zyzq + .portrait-screen-live-box .invitation-box, .list-header-zyzq + .ps-box .invitation-box{
	height: calc(100vh - 88px);

}
.invitation-box {
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.59);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10000;
  display: flex;
  justify-content: center;
}
.tip {
  height: 92px;
  line-height: 92px;
  text-align: center;
  font-size: 26px;
  font-weight: 400;
  color: #ffffff;
}

.invitation-box >>> .swiper-container {
  width: 100%;
  height: 100%;
}
.invitation-box >>> .swiper-wrapper {
  width: 542px;
  height: 1084px;
}

.invitation-box >>> .swiper-slide {
  height: 100%;
  width: 100%;
}
.swiper-pagination {
  bottom: 120px;
}
.invitation-box >>> .swiper-slide img {
  height: 100%;
  width: 100%;
  border-radius: 25px;
}

.loading {
  position: fixed;
  left: 0;
  right: 0;
  margin: auto;
  top: 45%;
  width: 100px;
  height: 100px;
}
.invitation-box .close-btn {
  width: 74px;
  height: 74px;
  position: absolute;
  right: 0;
  left: 0;
  margin: auto;
  bottom: 40px;
  z-index: 10;
  display: flex;
  justify-content: center;
  align-items: center;
  background: url(../../assets/images/invite_close.png) no-repeat center center;
  background-size: 55px 55px;
}
.invitation-box-old{
	width: 100vw;
		height: 100vh;
		background: rgba(0, 0, 0, 0.6);
		position: absolute;
		top: 0;
		left: 0;
		z-index: 10000;
		display: flex;
		justify-content: center;
		align-items: center;

}
.close-btn-old{
        width: 100px;
		height: 80px;
		position: absolute;
		top: 4px;
		right: 0;
		z-index: 10;
		display: flex;
		justify-content: center;
		align-items: center;
		background: url(../../assets/images/video-click-pic.png) no-repeat center center;
		background-size: 55px 55px;
}
</style>
